<template>
	<view>
		<view class='navbar' :class="parameter.class" :style="{height:navH+'rpx'}">						
				<view class='navbarH' :style="{height:CustomBar+'px','padding-top':(StatusBar)+'px'}">
					<view class='navbarCon index acea-row row-middle' v-if="parameter.navbar==0">
						<navigator class='location-box' hover-class="none" url="/pages/index/search_city">
							<text class="location">{{cityName}}</text>
							<text class="iconfont icon-xiala1"></text>
						</navigator>
						<view class='logo'>
							<image :src='logoUrl' mode="widthFix"></image>
						</view>
					</view>
					<view class='navbarCon acea-row row-center-wrapper' v-if="parameter.navbar==1">
						<view class="name line1" :class="parameter.color==true?'on':''">{{parameter.title}}</view>
						<view class='iconfont icon-icon_xiangzuo' :class="parameter.color==true?'on':''"
							v-if="parameter.return==1" @click="back"></view>
						<view class="home" :class="parameter.color == true?'on':''" v-if="parameter.return==2"
							@click="home" :style="{height:Custom.height+'px','padding-top':(Custom.height)+'px'}">
							<!-- <text class="iconfont icon-shouye2"></text> -->
							<u-icon name="home-fill" size="20"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height:navH+'rpx'}"></view>
		</view>
</template>

<script>
	let app = getApp();
	export default {
		props: {
			parameter: {
				type: Object,
				value: {
					class: '0'
				},
			},
			logoUrl: {
				type: String,
				value: '',
			},
			cityName: {
				type: String,
				value: '',
			}
		},
		data() {
			return {
				navH: "",
				StatusBar: 0,
				CustomBar: "",
			};
		},
		mounted() {
			// this.setClass();
			var pages = getCurrentPages();
			if (pages.length <= 1) {
				this.parameter.return = 0
			};

			this.navH = app.globalData.navHeight;
			// #ifdef  MP-WEIXIN
			this.StatusBar = app.globalData.StatusBar;
			// #endif
		
			this.CustomBar = app.globalData.CustomBar;
		},
		methods: {
			back: function() {
				uni.navigateBack();
			},
			setGoodsSearch: function() {
				uni.navigateTo({
					url: '/pages/search/index',
				})
			},
			home: function() {
				uni.switchTab({
					url: '/pages/index/index',
				})
			},
		}
	};
</script>
<style scoped>
	.navbar {
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
	}

	.navbar.on {
		background-color: #fff;
	}

	.navbar.nomal {
		background-color: #F7F3E8;
	}

	.navbar.gray {
		background-color: #666;
	}

	.navbar.transparent2 {
		background-color: transparent;
		padding-top: 0rpx;
	}

	.navbar.gradual01 {
		background-image: linear-gradient(to right, #D5E35F 0%, #85B446 100%);
	}

	.navbar.user {
		background: linear-gradient(to right, #E3F0FE 0%, #E7F1FD 100%);
	}

	.navbar.transparent {
		background-color: transparent;
		padding-top: 0rpx;
	}

	.navbar .navbarH {
		position: relative;
	}

	.navbar .navbarH .navbarCon {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.navbar .navbarH .navbarCon.index {
		padding-right: 206rpx;
	}

	.navbar .navbarH .navbarCon .name {
		color: #000;
		font-size: 28rpx;
		width: 300rpx;
		text-align: center;
	}

	.navbar .navbarH .navbarCon .name.on {
		color: #000;
	}

	.navbar.user .navbarH .navbarCon .name {
		color: #fff;
	}

	.navbar .navbarH .navbarCon .icon-icon_xiangzuo {
		color: #000;
		position: absolute;
		font-size: 40rpx;
		left: 16rpx;
		width: 100rpx;
		height: 56rpx;
		line-height: 54rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.navbar .navbarH .navbarCon .icon-icon_xiangzuo.on {
		color: #000;
	}

	.navbar .navbarH .navbarCon .home {
		color: #666;
		position: absolute;
		font-size: 32rpx;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		width: 50rpx;
		height: 50rpx;
	}

	.navbar .navbarH .navbarCon .home.on {
		color: #fff;
	}

	.navbar .navbarH .navbarCon .location-box {
		padding-left: 30rpx;
	}

	.navbar .navbarH .navbarCon .logo {
		width: 360rpx;
		margin-left: 20rpx;
	}

	.navbar .navbarH .navbarCon .logo image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.navbar.transparent .navbarH .navbarCon .search {
		background-color: rgba(255, 255, 255, .4);
		color: #fff;
	}

	.navbar.transparent .navbarH .navbarCon .name {
		color: #fff;
	}

	.navbar.transparent .navbarH .navbarCon .icon-icon_xiangzuo {
		color: #fff;
	}

	.navbar.transparent .navbarH .navbarCon .home {
		color: #fff;
	}

	.navbar.transparent2 .navbarH .navbarCon .name {
		color: #000;
	}

	.navbar.user .navbarH .navbarCon .name {
		color: #000;
	}
</style>
